<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <text class="back-btn">←</text>
      </view>
      <view class="header-center">
        <text class="header-title">{{ sceneryDetail.name || '景点详情' }}</text>
      </view>
      <view class="header-right" @click="shareScenery">
        <text class="share-btn">分享</text>
      </view>
    </view>
    
    <!-- 景点图片轮播 -->
    <view class="image-slider">
      <swiper 
        class="swiper" 
        autoplay 
        interval="3000" 
        circular 
        indicator-dots 
        indicator-active-color="#fff"
        indicator-color="rgba(255, 255, 255, 0.5)"
      >
        <swiper-item>
          <image :src="'/static/' + sceneryDetail.coverImage" mode="aspectFill"></image>
        </swiper-item>
        <!-- 可以添加更多图片 -->
      </swiper>
    </view>
    
    <!-- 景点基本信息 -->
    <view class="basic-info">
      <text class="scenery-name">{{ sceneryDetail.name }}</text>
      <view class="price-section">
        <text class="price-symbol">¥</text>
        <text class="price-number">{{ sceneryDetail.basePrice }}</text>
        <text class="price-unit">起/人</text>
        <text class="scenery-status" :class="sceneryDetail.status === '上架' ? 'status-active' : 'status-inactive'">
          {{ sceneryDetail.status }}
        </text>
      </view>
    </view>
    
    <!-- 景点描述 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">景点介绍</text>
      </view>
      <view class="section-content">
        <text class="description">{{ sceneryDetail.description }}</text>
      </view>
    </view>
    
    <!-- 预订须知 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">预订须知</text>
      </view>
      <view class="section-content">
        <text class="notice-item" v-for="(item, index) in bookingNoticeList" :key="index">
          • {{ item }}
        </text>
      </view>
    </view>
    
    <!-- 退款政策 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">退款政策</text>
      </view>
      <view class="section-content">
        <text class="notice-item" v-for="(item, index) in refundPolicyList" :key="index">
          • {{ item }}
        </text>
      </view>
    </view>
    
    <!-- 使用指南/开放时间 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">使用指南</text>
      </view>
      <view class="section-content">
        <text class="notice-item" v-for="(item, index) in usageGuideList" :key="index">
          • {{ item }}
        </text>
      </view>
    </view>
    
    <!-- 底部预订按钮 -->
    <view class="bottom-bar">
      <view class="price-info">
        <text class="price-symbol">¥</text>
        <text class="price-number">{{ sceneryDetail.basePrice }}</text>
        <text class="price-unit">起</text>
      </view>
      <button class="book-now-btn" @click="bookNow" :disabled="sceneryDetail.status !== '上架'">
        {{ sceneryDetail.status === '上架' ? '立即预订' : '暂不可预订' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sceneryDetail: {
        "id": 5,
        "createTime": "2025-09-23T04:54:02",
        "updateTime": "2025-09-23T17:18:54",
        "name": "福州三坊七巷",
        "description": "福州历史文化街区，保存完好的明清建筑群，被誉为\"明清建筑博物馆\"。三坊七巷是福州的历史之源、文化之根，自晋、唐形成起，便是贵族和士大夫的聚居地，清至民国走向辉煌。区域内现存古民居约有270座，有159处被列入保护建筑。以沈葆桢故居、林觉民故居、严复故居等9处典型建筑为代表的三坊七巷古建筑群，被国务院公布为全国重点文物保护单位。",
        "coverImage": "logo.png",
        "basePrice": 60,
        "bookingNotice": "1. 需提前1天预约\n2. 每人最多预约5张票\n3. 请携带有效身份证件入园\n4. 预约成功后不可修改日期",
        "refundPolicy": "1. 游览日期前1天可免费取消\n2. 游览当天取消收取50%手续费\n3. 过期未使用自动作废，不予退款",
        "usageGuide": "1. 开放时间：08:00-18:00\n2. 请从南后街主入口入园\n3. 园区内禁止吸烟\n4. 建议游览时间：2-3小时",
        "status": "上架"
      },
      bookingNoticeList: [],
      refundPolicyList: [],
      usageGuideList: []
    };
  },
  onLoad(options) {
    // 获取URL参数中的景点ID
    if (options && options.id) {
      this.loadSceneryDetail(options.id);
    }
  },
  methods: {
    loadSceneryDetail(id) {
      console.log('加载景点详情，ID:', id);
      // 在实际应用中，这里应该调用API获取景点详情
      // 模拟API调用成功后的数据处理
      this.parseTextList();
    },
    parseTextList() {
      // 解析文本列表，按换行符分割
      this.bookingNoticeList = this.sceneryDetail.bookingNotice.split('\n').map(item => {
        // 移除行首的序号
        return item.replace(/^\d+\.\s*/, '');
      });
      
      this.refundPolicyList = this.sceneryDetail.refundPolicy.split('\n').map(item => {
        return item.replace(/^\d+\.\s*/, '');
      });
      
      this.usageGuideList = this.sceneryDetail.usageGuide.split('\n').map(item => {
        return item.replace(/^\d+\.\s*/, '');
      });
    },
    goBack() {
      uni.navigateBack();
    },
    shareScenery() {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      });
    },
    bookNow() {
      if (this.sceneryDetail.status === '上架') {
        uni.showToast({
          title: '请到网页端进行预订',
          icon: 'none',
          duration: 2000
        });
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 100rpx; /* 为底部按钮留出空间 */
}

/* 头部样式 */
.header {
  background-color: rgba(26, 95, 122, 0.8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header-left,
.header-right {
  width: 80rpx;
  text-align: center;
}

.header-center {
  flex: 1;
  text-align: center;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
}

.back-btn {
  font-size: 48rpx;
}

.share-btn {
  font-size: 28rpx;
}

/* 图片轮播样式 */
.image-slider {
  width: 100%;
  height: 400rpx;
  margin-top: 100rpx; /* 为固定头部留出空间 */
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper image {
  width: 100%;
  height: 100%;
}

/* 基本信息样式 */
.basic-info {
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.scenery-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.price-section {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 28rpx;
  color: #ff4d4f;
}

.price-number {
  font-size: 48rpx;
  font-weight: bold;
  color: #1a5f7a;
}

.price-unit {
  font-size: 24rpx;
  color: #999;
  margin-left: 4rpx;
  margin-right: 20rpx;
}

.scenery-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 12rpx;
}

.status-active {
  color: #1a5f7a;
  background-color: #f6ffed;
  border: 1rpx solid #b7eb8f;
}

.status-inactive {
  color: #999;
  background-color: #f5f5f5;
  border: 1rpx solid #d9d9d9;
}

/* 通用区块样式 */
.section {
  background-color: white;
  margin-bottom: 20rpx;
}

.section-header {
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1a5f7a;
}

.section-content {
  padding: 30rpx;
}

/* 描述样式 */
.description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* 须知项样式 */
.notice-item {
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
  display: block;
  margin-bottom: 10rpx;
}

/* 底部预订按钮样式 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.price-info {
  display: flex;
  align-items: baseline;
}

.book-now-btn {
  background-color: #1a5f7a;
  color: white;
  border: none;
  border-radius: 40rpx;
  padding: 0 40rpx;
  height: 80rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.book-now-btn[disabled] {
  background-color: #d9d9d9;
  color: #999;
}
</style>